import {CardActionArea, Grid, Typography} from "@mui/material";
import Avatar from "@mui/material/Avatar";
import React, {useEffect} from "react";
import PubSub from "pubsub-js";

export default function SingerCard(props) {
    const {img,name,id,from,allSinger} = props;
    useEffect(async () => {

        // await init()

    },[])
    function toSingerDetail(){
        PubSub.publish('changeSingerDetailPage',{name:name,id:id,img:img});
        //console.log(name + ":::" + id)
    }

    return (
        <Grid item xs={10} marginBottom={5}>
            <CardActionArea onClick={toSingerDetail}>
                <Grid container direction='row'>
                    <Avatar sx={{ width: 64, height: 64 }} alt="face" src={img} />
                    <Typography variant="h5" marginLeft={5} maxWidth={230}>
                        {name}
                    </Typography>
                </Grid>
            </CardActionArea>

        </Grid>
    )

}